<template>
    <view style="padding: 15px;">
        <u-form ref="validateFormRef" :model="validateForm.value" :label-width="150">
            <u-form-item label="收货人" prop="consignee" required>
                <u-input v-model="validateForm.value.consignee" placeholder="请输入收货人"/>
            </u-form-item>
            <u-form-item label="手机号码" prop="phone" required>
                <u-input v-model="validateForm.value.phone" placeholder="请输入手机号码"/>
            </u-form-item>
            <u-form-item label="所在地区" prop="region" required>
                <u-input type="select" :select-open="pickerShow" v-model="validateForm.value.region" placeholder="省市区县、乡镇等" @click="pickerShow = true"/>
            </u-form-item>
            <u-form-item label="详细地址" prop="address" required>
                <u-input type="textarea" height="40" placeholder="街道、楼牌等" v-model="validateForm.value.address"/>
            </u-form-item>
        </u-form>

        <u-button type="error" @click="submit">提交</u-button>

        <u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm" v-if="!validateForm.value.provinceName"></u-picker>
        <u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm" v-if="validateForm.value.provinceName"
                  :default-region="[validateForm.value.provinceName, validateForm.value.cityName, validateForm.value.areaName]"></u-picker>
    </view>
</template>

<script>
    import {UFormUtil} from "@/dev/core/utils/u-form.util";
    import {TbShippingAddressService} from "@/dev/services/tb-shipping-address.service";
    import {CommonUtil} from "@/dev/core/utils/common.util";

    export default {
        data() {
            return {
                pickerShow: false,
                validateForm: {
                    value: {
                        id: null,
                        consignee: null,
                        phone: null,
                        region: '',
                        provinceName: '',
                        cityName: '',
                        areaName: '',
                        address: null,
                    },
                    rules: {
                        consignee: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^(?=.*\S).+$/, message: '必填项!', trigger: ['change', 'blur']}
                        ],
                        phone: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^1[0-9]{10}$/, message: '请输入有效的手机号!', trigger: ['change', 'blur']}
                        ],
                        region: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^(?=.*\S).+$/, message: '必填项!', trigger: ['change', 'blur']}
                        ],
                        address: [
                            {required: true, message: '必填项!', trigger: ['change', 'blur']},
                            {pattern: /^(?=.*\S).+$/, message: '必填项!', trigger: ['change', 'blur']}
                        ]
                    }
                }
            }
        },
        onLoad(options) {
            this.validateForm.value.region = options.provinceName + '-' + options.cityName + '-' + options.areaName;
            UFormUtil.setDefaultValues(this.validateForm, options);
        },
        methods: {
            // 选择地区回调
            regionConfirm(e) {
                this.validateForm.value.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
                this.validateForm.value.provinceName = e.province.label;
                this.validateForm.value.cityName = e.city.label;
                this.validateForm.value.areaName = e.area.label;
            },
            submit() {
                const _self = this;
                this.$refs.validateFormRef.validate(valid => {
                    if (valid) {
                        console.log('验证通过', _self.validateForm.value);
                        CommonUtil.alert({
                            title: '提示！',
                            content: '确认提交吗？',
                            showCancel: true, // 是否显示取消按钮
                            success: function (res) {
                                if (res.cancel) { // 点击取消,默认隐藏弹框
                                } else { // 点击确定
                                    new TbShippingAddressService().updateTbShippingAddress(_self.validateForm.value).then(result => {
                                        CommonUtil.toastNavigateBack('更新成功')
                                    })
                                }
                            }
                        });
                    } else {
                        console.log('验证失败');
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
</style>
